<template>
    <!-- pages/buymealdetails/index.wxml -->
    <view class="page">
        <view class="bg">
            <image :src="imgUrl + 'mealbg.png'"></image>
            <view class="flexbox">
                <view class="flexleft">
                    <view class="text1">{{ mealObj.categoryname }}</view>
                    <view class="text2">可用次数：{{ mealObj.times }}次</view>
                    <view class="text3">
                        <text>
                            <text class="money">¥</text>
                            {{ mealObj.price }}
                        </text>
                        <text>原价¥{{ mealObj.costprice }}</text>
                    </view>
                </view>
                <view class="flexright">
                    <view class="headerbox" @tap="toHairstylistdetails" :data-item="mealObj">
                        <view class="header"></view>
                        <image :src="mealObj.headportrait"></image>
                    </view>
                    <view class="text4">仅{{ mealObj.stylistName }}美发师可用</view>
                </view>
            </view>
        </view>
        <view class="details">
            <view class="title">套餐详情：</view>
            <view class="detailsfelx">
                <text>美发师：</text>
                <text>{{ mealObj.stylistName }}</text>
            </view>
            <view class="detailsfelx">
                <text>套餐类型：</text>
                <text>{{ mealObj.type < 2 ? '单项套餐' : '多项套餐' }}</text>
            </view>
            <view :class="(mealObj.type < 2 ? 'detailsfelx' : 'contentliquid') + ' '">
                <text>套餐项目：</text>
                <text>{{ mealObj.contentLiquid || '' }}</text>
            </view>
            <view class="detailsfelx">
                <text>可用次数：</text>
                <text id="textcolor">{{ mealObj.times }}次</text>
            </view>
            <view class="detailsfelx">
                <text>有效期限：</text>
                <text id="textcolor">永久有效</text>
            </view>
        </view>
        <view class="explain">
            <view class="explaintext">使用说明：</view>
            <view>
                <view class="explaintext1">套餐有效期</view>
                <view class="explaintext2">套餐自购买成功开始生效，有效期：永久有效</view>
            </view>
            <view>
                <view class="explaintext1">使用说明</view>
                <view class="explaintext2">在个人中心优惠券中使用套餐券直接下单预约</view>
            </view>
            <view>
                <view class="explaintext1">规则提醒</view>
                <view class="explaintext2">1、购买套餐不支持优惠券；</view>
                <view class="explaintext2">2、套餐购买成功后，将以套餐券的形式发放至账户个人中心优惠券中</view>
                <view class="explaintext2">3、预约美发师下单，每次仅能使用一张套餐券，套餐仅限该美发师使用</view>
            </view>
            <view>
                <view class="explaintext1">退款须知：</view>
                <view class="explaintext2">1、本套餐券支持退款</view>
                <view class="explaintext2">2、预约美发师下单，每次仅能使用一张套餐券。套餐券一旦使用将不可再退款；</view>
                <view class="explaintext2">3、若无使用，购买后可点击“退款”按支付价格全部退回；</view>
            </view>
        </view>
    </view>
    <!-- <view class="btn">
    <view>
      <text class="buytext1">应付金额：</text>
      <text class="buytext2">¥{{mealObj.price}}</text>
    </view>
    <view  class="buytext3" bindtap="toBuy" data-meal="{{mealObj}}">购买套餐</view>
  </view> -->
</template>

<script>
// pages/buymealdetails/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            mealObj: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 购买套餐详情
        _request
            .postObj(
                '/package/getPackageByServiceId',
                {
                    serviceId: options.id,
                    userId: uni.getStorageSync('userid')
                },
                app.globalData.userType
            )
            .then((res) => {
                this.setData({
                    mealObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 去购买
        toBuy(e) {
            const { meal } = e.currentTarget.dataset; // 可以传值过去，可以传id过去再请求

            let obj = JSON.stringify(meal);
            uni.navigateTo({
                url: '/pages/buymealdetails/pay/index?data=' + encodeURIComponent(obj)
            });
        },

        // 前往美发师详情
        toHairstylistdetails(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj)
            });
        }
    }
};
</script>
<style>
/* pages/buymealdetails/index.wxss */
page {
    background: #fbfbfb;
}

.page {
    padding: 20rpx 20rpx 0 20rpx;
}

/* 背景 */
.bg {
    width: 710rpx;
    height: 342rpx;
}

.bg > image {
    width: 710rpx;
    height: 342rpx;
    z-index: -1;
    position: absolute;
}

.flexbox {
    display: flex;
    justify-content: space-between;
    width: 710rpx;
    height: 342rpx;
    box-sizing: border-box;
    padding: 40rpx;
}

.text1 {
    height: 56rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34rpx;
    margin: 14rpx 0 50rpx 0;
}

.text3 {
    position: absolute;
}

.text3 > text:nth-child(1) {
    height: 84rpx;
    font-size: 60rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 56rpx;
}

.money {
    font-size: 40rpx;
    margin-right: 16rpx;
}

.text3 > text:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34rpx;
    margin-left: 24rpx;
    text-decoration: line-through;
}

.text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34rpx;
    margin-top: 82rpx;
    position: absolute;
    right: 20px;
}

.flexright {
    text-align: -webkit-right;
}

.headerbox {
    height: 154rpx;
    width: 154rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.3;
    z-index: 1;
    height: 154rpx;
    width: 154rpx;
    position: absolute;
}

.headerbox > image {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
    z-index: 3;
}

/* 套餐详情 */
.details {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 30rpx 40rpx;
}

.details .title {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    margin-bottom: 10rpx;
}

.detailsfelx {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.detailsfelx text:nth-child(1) {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 50rpx;
}

.detailsfelx text:nth-child(2) {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 50rpx;
}
.contentliquid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.contentliquid text:nth-child(1) {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 50rpx;
}

.contentliquid text:nth-child(2) {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 50rpx;
}

#textcolor {
    color: red;
}

/* 使用说明 */
.explain {
    width: 710rpx;
    height: 900rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 38rpx 48rpx 0 48rpx;
}

.explaintext {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.explaintext1 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    margin: 20rpx 0 10rpx 0;
}

.explaintext2 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 44rpx;
}

/* 提交按钮 */
.btn {
    width: 100%;
    height: 100rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-self: center;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    line-height: 60rpx;
}

.buytext1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
}

.buytext2 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
}

.buytext3 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    width: 160rpx;
    height: 60rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 15px;
    color: white;
    line-height: 60rpx;
    text-align: center;
}
</style>
